<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>home</title>
</head>

<body>
    <!-- 轮播 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../img/index-swiper-bg1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../img/index-swiper-bg2.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <!-- 主体内容 -->
    <div class="cotainer main">
        <!-- 今日排名&累计打卡 -->
        <div class="card dpflex mt16">
            <!-- 打卡 -->
            <div class="rank">
                <h3 class="text">今日排名</h3>
                <p id="rankNum" class="rankNum">--</p>
            </div>
            <!-- 签到 -->
            <div class="sgin">
                <h3 class="text">累计打卡 <span id="sumDays">--</span>天</h3>
                <div id="sgins" class="sgins">今日打卡</div>
            </div>
        </div>
        <!-- 运动数据&徽章 -->
        <div class="card dpflex mt16">
            <!-- 运动数据 -->
            <div class="sp-data ">
                <p class="text">运动数据</p>
            </div>
            <!-- 徽章 -->
            <div class="badge ml12">
                <p class="text">累积运动徽章</p>
                <p class="badge-text"><span id="badge">--</span>枚</p>
            </div>
        </div>
        <!-- 课程训练 -->
        <div class="play-class mt16" id="playClass">
            <p class="text">课程训练</p>
        </div>
        <!-- 户外跑步 -->
        <div class="run mt16">
            <p class="text">户外跑步</p>
        </div>
    </div>
</body>

</html>